<template>
  <div>
    <van-nav-bar :title="fam_name"
                 left-text="返回" left-arrow @click-left="backAction">

      <template slot="right">
        <span style="margin-top: -15px;margin-right: -30px">{{ survey_date }} </span>
        <br/>
        <span style="margin-top: 15px;margin-left: -25px">{{ fam_age }} </span>
      </template>
    </van-nav-bar>

    <van-cell title-style="text-align:left;margin-left: 10px">
      <template id="risk-cell" slot="title">
        <span>龋齿风险  :&nbsp;&nbsp;</span>
        <van-tag v-if="survey_result===2" color="red">高</van-tag>
        <van-tag v-else-if="survey_result===1" color="orange">中</van-tag>
        <van-tag v-else-if="survey_result===0" color="green">低</van-tag>
      </template>

      <template slot="default">
        <span style="color: blue" @click="toAnsDetail">问卷详情</span>
      </template>
    </van-cell>

    <div id="main-chart"/>


    <van-panel id="advice-panel" title="建议: " style="margin-bottom: 100px">
      <van-cell v-if="advice_list==null" title="Loading"/>

      <template slot="default">
        <van-cell v-for="advice in advice_list" :key="advice" :title="advice" title-style="margin-left: 20px"/>
      </template>
    </van-panel>



    <div id="footer-div">
      <van-button  id="btn_return_main_page" text="返回首页" @click="backQueList"/>
    </div>
  </div>
</template>

<script>

import Vue from "vue"
import {Cell, NavBar, Panel, Tag} from "vant"
import echarts from "echarts"
import adviceList from "@/assets/adviceList";

Vue.use(Panel)
Vue.use(Cell)
Vue.use(Tag)
Vue.use(NavBar)

export default {
  name: "queResult",
  data() {
    return {
      temp_flag : false,
      question_type: null,

      survey_answer: null,
      survey_point: null,
      survey_result: 0,

      values: [],

      fam_id: null,
      fam_name: null,
      fam_birth: null,
      fam_age: null,
      survey_date:null,

      advice_list: []
    }
  },
  created() {
    this.question_type = this.$route.query.question_type;

    this.fam_id = sessionStorage.getItem("respondent_id");
    this.fam_name = sessionStorage.getItem("respondent_name");
    this.fam_birth = sessionStorage.getItem("respondent_birth");
    this.fam_age = sessionStorage.getItem("respondent_age");
    this.survey_date = sessionStorage.getItem("survey_date");
    this.survey_answer = this.$route.query.survey_answer;
    this.survey_point = this.$route.query.survey_point;

    this.getPieValue();
    this.genAdviceList();

  },
  mounted: function () {
    this.$nextTick(function () {
      this.getPie();
    })
  },
  methods: {
    backQueList() {
      this.$router.push({
        name: "queList",
        query:{
          openid: sessionStorage.getItem("openid")
        }
      })
    },
    toAnsDetail() {
      this.$router.push({
        name: "ansDetail",
        params: {
          survey_answer: this.survey_answer
        }
      })
    },
    backAction() {
      history.back();
    },

    genAdviceList() {
      let tmp_list_dic = {};

      let tmp_dic = {
        0: 0,
        1: 0,
        2: 0,
        3: 0,
        4: 1,
        5: 2,
        6: 2,
        7: 3,
        8: 3,
        9: 3,
        10: 4,
        11: 5,
        12: 6,
        13: 6,
        14: 7,
        15: 8,
        16: 8,
        17: 9,
        18: 9,
        19: 9,
        20: 9,
        21: 9,
      }

      for (let i = 0; i < this.survey_point.length; i++) {
        if (parseInt(this.survey_point[i]) !== 0) {
          if (tmp_dic[i] in tmp_list_dic)
            tmp_list_dic[tmp_dic[i]] += parseInt(this.survey_point[i]);
          else
            tmp_list_dic[tmp_dic[i]] = parseInt(this.survey_point[i]);
        }
      }

      let sorted_dic = Object.keys(tmp_list_dic).sort(function (a, b) {
        return tmp_list_dic[b] - tmp_list_dic[a]
      })

      for (let i = 0; i < sorted_dic.length && i < 5; i++) {
        this.advice_list.push("\t" + (i + 1) + "、" + adviceList[sorted_dic[i]])
      }
    },

    getPieValue() {
      let A = 578;

      let C1 = 30;
      let C2 = 60;

      let A1 = A * C1 / 100;
      let A2 = A * C2 / 100;


      let part1 = 0;
      let part2 = 0;
      let part3 = 0;
      let part4 = 0;
      let all_part = 0;
      for (let i = 0; i < this.survey_point.length; i++) {
        if (i < 4) {
          part1 += parseInt(this.survey_point[i]);
        } else if (i < 10) {
          part2 += parseInt(this.survey_point[i]);
        } else if (i < 15) {
          part3 += parseInt(this.survey_point[i]);
        } else if (i < 22) {
          part4 += parseInt(this.survey_point[i])
        }
      }
      all_part = part1 + part2 + part3 + part4;
      if (all_part > A1) {
        this.survey_result = 1;
      }
      if (all_part > A2) {
        this.survey_result = 2;
      }

      this.values = [];
      this.values.push(...[part1, part2, part3, part4, A - all_part]);
    },
    getPie() {
      let values = this.values;
      // 绘制图表
      const myChart = echarts.init(document.getElementById('main-chart'));
      // 指定图表的配置项和数据
      const option = {

        stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },

        //饼图中各模块的颜色
        color: ['#FF0000', '#FF0000', '#FF0000', '#FF0000', '#0000FF'],
        // 饼图数据
        series: {
          name: '病因分布',
          type: 'pie',             //echarts图的类型   pie代表饼图
          radius: ['0%', '70%'],           //饼图中饼状部分的大小所占整个父元素的百分比
          center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
          data: [                  //每个模块的名字和值
            {name: '家庭情况', value: values[0]},
            {name: '饮食概况', value: values[1]},
            {name: '生活习惯', value: values[2]},
            {name: '医疗保健', value: values[3]},
            {name: '无齲', value: values[4]}
          ],
          itemStyle: {
            normal: {
              label: {
                show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
              },
              labelLine: {
                show: true
              },
              borderColor: "#FFFFFF", borderWidth: 3,
            }
          },

          legends: {}
        }

      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }

  }
}
</script>

<style scoped>
#main-chart {
  width: 90%;
  height: 200px;
}

#advice-panel {
  text-align: left;
  margin-bottom: 50px;
}

#btn_return_main_page{


}

#footer-div{
  width: 100%;
  position: fixed;
  bottom: 0;
  padding-top: 8px;
  padding-bottom: 20px;
  background-color: white;
  align-content: center;
  height: max-content;
}
</style>